<template>
	<view class="mine-container">
		<!--顶部个人信息栏-->
		<view class="header-section btn" :style="{'padding-top':statusBarHeight + 'px'}">
			<view class="flex justify-between" style="padding: 30px 0 10px 0;">
				<view class="flex align-center">
					<u--image :showLoading="true" :src="avatar" width="60px" height="60px" mode="widthFix"
						shape="circle" @click="handleToAvatar">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
					<view v-if="!name" @click="handleToLogin" class="login-tip">
						登录/注册
					</view>
					<view v-if="name" @click="handleToInfo" class="user-info">
						<view class="u_title">
							{{ name }}
						</view>
						<view class="u_content">
							{{userInfo.welcomeContent}}
						</view>
					</view>
				</view>
				<view @click="handleToEditInfo" class="flex align-center user-edit" v-if="userInfo">
					<view class="iconfont icon-edit"></view>
				</view>
			</view>
		</view>

		<view class="content-section">
			<!-- <view class="mine-actions grid col-4 text-center">
				
				#ifdef  MP-WEIXIN
				<view class="action-item" @click="handleScan">
					<view class="iconfont icon-scan text-orange icon"></view>
					<text class="text">扫一扫</text>
				</view>
				
			</view> -->

			<view class="menu-list">
				<u-cell-group :border="false" :customStyle="{'background': '#fff'}">
					<u-cell title="登录日志" :border="false" :isLink="true" size="large" @click="handleToLoglog">
						<view slot="icon" class="iconfont icon-log menu-icon text-blue"></view>
					</u-cell>
				</u-cell-group>
			</view>

			<view class="menu-list">
				<u-cell-group :border="false" :customStyle="{'background': '#fff'}">
					<!-- #ifdef H5 -->
					<u-cell title="常见问题" size="large" :border="false" :isLink="true" @click="handleHelp">
						<view slot="icon" class="iconfont icon-help menu-icon text-blue"></view>
					</u-cell>
					<!-- #endif -->
					<u-cell title="关于我们" size="large" :border="false" :isLink="true" @click="handleAbout">
						<view slot="icon" class="iconfont icon-aixin menu-icon text-info"></view>
					</u-cell>
					<u-cell title="应用设置" size="large" :border="false" :isLink="true" @click="handleToSetting">
						<view slot="icon" class="iconfont icon-setting menu-icon text-grey1"></view>
					</u-cell>
				</u-cell-group>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		isExternal
	} from '@/utils/common.js'
	import {
		scanQrLogin
	} from '@/api/login.js'
	export default {
		data() {
			return {
				name: this.$store.state.user.name
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			statusBarHeight() {
				return uni.getSystemInfoSync().statusBarHeight
			},
			userInfo() {
				return this.$store.getters.userInfo
			},
		},
		onLoad() {},
		onReady() {
			this.$store.dispatch('GetInfo');
		},
		methods: {
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},

			handleToLoglog() {
				this.$tab.navigateTo('/pages/monitor/logininfo')
			},
			// handleScan() {
			// 	var that = this
			// 	uni.scanCode({
			// 		success: (res) => {
			// 			console.log('条码类型：' + res.scanType);
			// 			console.log('条码内容：' + res.result);
			// 			var result = res.result
			// 			if (isExternal(result)) {
			// 				uni.showModal({
			// 					title: '请勿扫码来源不明的网站',
			// 					content: `确定要跳转到${result}`,
			// 					showCancel: true,
			// 					success: function(res) {
			// 						if (res.confirm) {
			// 							that.$tab.navigateWebview('扫码跳转', result)
			// 						} else if (res.cancel) {
			// 							console.log('用户点击取消');
			// 						}
			// 					}
			// 				})
			// 			} else {
			// 				uni.showModal({
			// 					title: '扫码结果',
			// 					content: `确定要用${that.name}登录`,
			// 					showCancel: true,
			// 					success: function(res) {
			// 						if (res.confirm) {
			// 							scanQrLogin(result).then((info) => {})
			// 						} else if (res.cancel) {
			// 							console.log('用户点击取消');
			// 						}
			// 					}
			// 				})
			// 			}
			// 		},
			// 		fail: function(err) {
			// 			console.error(err)
			// 		}
			// 	});
			// }
		}
	}
</script>

<style lang="scss">
	/* #ifdef H5 */
	uni-page-head {
		display: none !important;
	}

	/* #endif */
	page {
		// background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;

		.header-section {
			padding: 50px 15px 45px 15px;
			background-color: #3c96f3;
			color: white;

			.user-edit {
				width: 30px;

				.icon-edit {
					font-size: 25px;
				}
			}

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;
				margin-right: 20px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
					width: 180px;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.u_content {
					width: 160px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px 0;
				border-radius: 8px;
				background-color: white;

				.action-item {
					margin-bottom: 15px;

					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}

			}
		}
	}
</style>